<template>
  <div class="fullscreen">
    <div class="fullscreen-list">
      <!-- 退出 -->
      <div class="quit" @click="$emit('hidefull', false)">
        <i class="ipt"></i>
      </div>
      <!-- 名字 -->
      <div class="music-name">
        <h1>{{ music.name }}</h1>
      </div>
      <!-- 列表 -->
      <div class="list" @click="ClickList">
        <i class="img"></i>
      </div>
    </div>
    <!-- 歌名列表歌单 -->
    <div :class="[isChecked ? 'list-block' : 'list-none']">
      <p
        v-for="s in playCollect"
        :key="s.id"
        :class="{ active: s.id == music.id }"
        @click="$emit('play', s)"
      >
        {{ s.name }}
      </p>
    </div>
    <!-- 图片 -->
    <div class="cover">
      <div class="cover-pic">
        <img
          :src="music.picUrl || music.al.picUrl"
          :style="{ animationPlayState: playstate ? 'running' : 'paused' }"
        />
      </div>
    </div>
    <!-- 歌词 -->
    <div class="lyric">
      <ul :style="{ transform: `translateY(${toppx}px)` }">
        <template v-for="(l, i) in lyricArray">
          <li v-if="l" :key="i" :class="{ highlight: i == highIndex }">
            {{ l.lyric }}
          </li>
        </template>
      </ul>
    </div>

    <div class="controls">
      <!-- 值的范围时0-100 currentTime当前播放时间 totalTime总时间 -->
      <div class="range">
        <span>{{ currentTime | formatTime }}</span>
        <input type="range" v-model="processTime" min="0" max="100" />
        <span>{{ totalTime | formatTime }}</span>
        <!-- 随机播放按钮 -->
        <div
          class="random"
          :class="{ active: cirlceMode == 'random' }"
          @click="$emit('changecircle', 'random')"
        >
          <i></i>
        </div>
      </div>
      <div class="ctrls">
        <!-- 单曲循环 -->
        <div class="single" :class="{ active: cirlceMode == 'single' }" @click="$emit('changecircle', 'single')">
          <i></i>
        </div>
        <!-- 上一首 -->
        <div class="Last-one" @click="$emit('changemusic', 1)">
          <i></i>
        </div>
        <!-- 播放{{ playstate ? "||" : "▶" }} -->
        <div class="broadcast" @click="play">
          <i :class="[playstate ? 'none':'block']"></i>
        </div>
        <!-- 下一首 -->
        <div class="Next-song" @click="$emit('changemusic', 2)">
          <i></i>
        </div>
        <!-- 列表循环 -->
        <div class="List-loop"
          @click="$emit('changecircle', 'list')">
          <i></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    music: Object,
    playstate: {
      type: Boolean,
      default: true,
    },
    currentTime: {
      type: Number,
      default: 0,
    },
    totalTime: {
      type: Number,
      default: 0,
    },
    playCollect: Array,
    cirlceMode: {
      type: String,
      default: "list",
    },
  },
  data() {
    return {
      lyric: null,
      isChecked: false,
    };
  },
  created() {
    this.getLyric();
  },
  methods: {
    async getLyric() {
      //获取歌词
      let re = await this.axios.get("/lyric?id=" + this.music.id);
      this.lyric = re.lrc.lyric;
    },
    play() {
      this.$emit("playorpaused");
    },
    ClickList() {
      this.isChecked = !this.isChecked;
    },
  },
  computed: {
    toppx() {
      let t = this.highIndex * 30 - 30; //歌词高度
      return -t;
    },
    highIndex() {
      if (this.lyricArray.length < 2) return 0;
      if (
        this.currentTime >= this.lyricArray[this.lyricArray.length - 2].time
      ) {
        return this.lyricArray.length - 2;
      }
      for (let i = 0; i < this.lyricArray.length; i++) {
        if (
          this.lyricArray[i].time <= this.currentTime &&
          this.currentTime < this.lyricArray[i + 1].time
        ) {
          return i;
        }
      }
      return 0;
    },
    lyricArray() {
      //处理歌词信息
      if (!this.lyric) return [];
      let larr = this.lyric.split("\n");
      let reg = /\[(\d+?):(\d+?\.\d+)\]([.\s\S]*)/;
      return larr.map((item) => {
        if (reg.test(item)) {
          return {
            time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
            lyric: RegExp.$3,
          };
        }
      });
    },
    processTime: {
      get() {
        //v-model绑定计算属性。设置getter/setter
        return (this.currentTime / this.totalTime) * 100;
      },
      set(value) {
        //当拖动修改range的值的时候，就修改播放时间.
        console.log("计算属性改变的值=>", value);
        let ctime = (value / 100) * this.totalTime;
        this.$emit("changetime", ctime);
      },
    },
  },
  watch: {
    music() {
      this.lyric = "";
      this.$emit("changetime", 0);
      this.getLyric();
    },
  },
  filters: {
    formatTime(value) {
      let minut = parseInt(value / 60); //70秒 1:10
      let sec = parseInt(value % 60); //秒数
      if (isNaN(minut)) return "00:00";
      minut = minut < 10 ? "0" + minut : minut; //分钟数小于10 加0
      sec = sec < 10 ? "0" + sec : sec;
      return minut + ":" + sec;
    },
  },
};
</script>

<style lang="less" scoped>
.fullscreen {
  z-index: 11;
  position: relative;
  // 上顶页面包含退出 歌名 列表
  .fullscreen-list {
    width: 100%;
    height: 50px;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    // 退出
    .quit {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      // background: url("../assets/退出.svg") no-repeat;
      // background-size: cover;
      & > .ipt {
        width: 30px;
        height: 30px;
        display: inline-block;
        background: url("../assets/退出.svg") no-repeat;
        background-size: cover;
      }
    }
    // 名字
    .music-name {
      flex: 1;
      height: 50px;
      h1 {
        color: #ccc;
        height: 50px;
        overflow: hidden;
        line-height: 50px;
        text-align: center;
      }
    }
    // 列表
    .list {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      & > .img {
        width: 30px;
        height: 30px;
        display: inline-block;
        background: url("../assets/列表.svg") no-repeat;
        background-size: cover;
      }
    }
  }
  // 歌单列表
  // 歌单列表隐藏
  .list-none {
    display: none;
  }
  // 歌单列表显示
  .list-block {
    position: absolute;
    top: 80px;
    left: 95px;
    width: 70vw;
    height: 40vh;
    display: block;
    box-sizing: border-box;
    border-radius: 8px 8px 8px 8px;
    background: rgb(216, 225, 235);
    z-index: 12;
    opacity: 0.8;
    overflow: auto;
    & > p {
      font-weight: bold;
      font-size: 17px;
      text-align: center;
      padding: 10px;
      border-bottom: 2px solid #ccc;
      &.active {
        color: rgb(29, 143, 236);
        font-size: 20px;
        font-weight: 500;
      }
    }
  }
  // 图片
  .cover {
    width: 375px;
    height: 375px;
    margin: 20px auto 0;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 10px 40px rgba(195, 205, 217, 1),
      -10px -10px 40px rgba(255, 255, 255, 1);
    background: linear-gradient(
      135deg,
      rgba(218, 230, 240, 1),
      rgb(255, 255, 255, 0.2)
    );
    // 模糊度
    filter: blur(0.5px);
    .cover-pic {
      width: 335px;
      height: 335px;
      overflow: hidden;
      border-radius: 100%;
      img {
        width: 335px;
        animation: round 4s linear infinite;
      }
    }
  }
  // 歌词
  .lyric {
    height: 13vh;
    overflow: hidden;
    position: relative;
    ul {
      position: absolute;
      width: 100%;
      top: 0px;
      transition: transform 0.5s linear;
      li {
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #8f9cab;
        white-space: nowrap;
        font-size: 12px;
        opacity: 0.5;
        &.highlight {
          font-size: 20px;
          font-weight: bold;
          color: rgb(144, 184, 230);
          opacity: 1;
        }
      }
    }
  }
  .controls {
    .range {
      display: flex;
      padding: 20px;
      color: white;
      align-items: center;
      position: relative;
      span {
        font-size: 14px;
      }
      input {
        flex: 1;
        &[type="range"] {
          -webkit-appearance: none;
          background-image: linear-gradient(
            to right,
            white,
            rgb(144, 184, 230)
          );
          -webkit-appearance: none;
          height: 4px;
          padding: 0;
          border: none;
        }
        &[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none;
          cursor: default;
          top: 0;
          height: 10px;
          width: 20px;
          transform: translateY(0px);
          background: black;
          border-radius: 15px;
          border: 5px solid white;
        }
      }
      // 随机
      .random {
        width: 30px;
        height: 30px;
        & > i {
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/随机播放.svg") no-repeat;
          background-size: cover;
        }
      }
    }
    // 单曲循环 上一首 播放 下一首 列表循环
    .ctrls {
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // 单曲循环
      .single{
        width: 46px;
        height: 46px;
        &>i{
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/单曲循环_32.svg") no-repeat;
          background-size: cover;
        }
      }
      // 上一首
      .Last-one{
        width: 46px;
        height: 46px;
        &>i{
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/上一首.svg") no-repeat;
          background-size: cover;
        }
      }
      // 播放
      .broadcast{
        width: 46px;
        height: 46px;
        .none{
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/暂停.svg") no-repeat;
          background-size: cover;
        }
        .block{
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/播放.svg") no-repeat;
          background-size: cover;
        }
      }
      // 下一首
      .Next-song{
        width: 46px;
        height: 46px;
        &>i{
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/下一首.svg") no-repeat;
          background-size: cover;
        }
      }
      // 列表循环
      .List-loop{
        width: 46px;
        height: 46px;
        &>i{
          width: 100%;
          height: 100%;
          display: inline-block;
          background: url("../assets/列表循环.svg") no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
@keyframes round {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>